<template>
  <div
    class="itemChildren"
    v-if="treeData.chrildren && treeData.chrildren.length"
  >
    <div
      v-for="childrenData in treeData.chrildren"
      :key="childrenData.menuCode"
      :style="returnStyle(childrenData.chrildren)"
      class="item"
    >
      <div class="tit">
        <div class="d_page">
          <template v-for="item in num">
            <span class="back"></span>
          </template>
          <el-checkbox
            v-model="childrenData.isHavePermission"
            :label="childrenData.menuCode"
            :indeterminate="
              childrenData.num != childrenData.buttons.length &&
              childrenData.num != 0
            "
            @change="
              handleCheckAllChange(
                { val: childrenData, checked: $event },
                childrenData,
                treeData
              )
            "
          >
            {{ childrenData.menuName }}
          </el-checkbox>
        </div>
        <div class="d_function">
          <el-checkbox
            v-for="api in childrenData.buttons"
            :key="api.menuCode"
            v-model="api.isHavePermission"
            :label="api.menuCode"
            @change="
              handleCheckAllChange(
                { buttons: childrenData.buttons, val: api, checked: $event },
                childrenData,
                treeData
              )
            "
            >{{ api.buttonName }}</el-checkbox
          >
        </div>
        <div style="width: 170px">
          <el-checkbox
            v-model="childrenData.isSee"
            @change="handleSeeChange(childrenData, treeData)"
            v-if="childrenData.chrildren.length == 0"
            >仅查看</el-checkbox
          >
        </div>
      </div>
      <checkboxTreeRender :tree-data="childrenData" :num="Number(num + 1)" />
    </div>
  </div>
</template>
<script>
export default {
  name: "CheckboxTreeRender",
  props: {
    treeData: {
      type: Object,
      default: function () {
        return {};
      },
    },
    num: {
      type: Number,
      default: function () {
        return 0;
      },
    },
  },
  data() {
    return {
      isOnlySee: false,
      isIndeterminate: false,
    };
  },
  computed: {
    getIndeterminate() {
      return function (item) {
        if (item.buttons) {
          for (let index = 0; index < item.buttons.length; index++) {
            if (item.buttons[index].isHavePermission) {
              return true;
            }
          }
        }
      };
    },
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
    returnStyle(child) {
      const premise = child && child.length;
      return {};
    },
    handleCheckAllChange(data, parent, tree) {
      if (!data.val.isHavePermission) {
        data.val.isSee = false;
        if (!data.buttons) {
          parent.buttons.forEach((item) => {
            item.isHavePermission = false;
          });
          parent.num = 0;
        }
      } else {
        if (!data.buttons) {
          
          parent.buttons.forEach((item) => {
            item.isHavePermission = true;
          });
          parent.num = parent.buttons.length;
        }
        if(parent.buttons.length<1){
          data.val.isSee = true;
        }
      }
      if (data.buttons) {
        let state = true;
        parent.num = 0;
        parent.buttons.forEach((item) => {
          if (item.isHavePermission) {
            parent.num++;
            state = false;
          }
        });
        if (state) {
          parent.isSee = true;
        } else {
          parent.isSee = false;
          parent.isHavePermission = true;
          if (parent.parentCode != "-1") {
            tree.parentData.data.forEach((item) => {
              if (item.menuCode == tree.menuCode) {
                tree.isHavePermission = true;
                item.isHavePermission = true;
              }
            });
          }
        }
      }
      this.$forceUpdate();
      this.$emit("handle-check-all-change", data);
    },
    //仅查看选择事件
    handleSeeChange(data, tree) {
      if (tree.parentCode != "-1") {
        tree.parentData.data.forEach((item) => {
          if (item.menuCode == tree.parentCode) {
            tree.isHavePermission = true;
            item.isHavePermission = true;
          }
        });
      } else {
        tree.isHavePermission = true;
      }
      if (data.isSee) {
        data.isHavePermission = true;
        data.buttons.forEach((item) => {
          item.isHavePermission = false;
        });
        data.num = data.buttons.length;
      } else {
        data.isHavePermission = false;
        data.buttons.forEach((item) => {
          item.isHavePermission = false;
        });
        let state = true;
        if (tree.parentCode != "-1") {
          tree.isHavePermission = false;
        }
        
        tree.parentData.data.forEach((item) => {
          if(item.menuName == tree.menuName){
            item.chrildren.forEach((x) => {
              if (x.isHavePermission) {
                state = false;
              }
            });
          }
        });
        if (state) {
          if (tree.parentCode != "-1") {
            tree.parentData.data.forEach((item) => {
              if (item.menuCode == tree.parentCode) {
                tree.isHavePermission = false;
                item.isHavePermission = false;
              }
            });
          } else {
            tree.isHavePermission = false;
          }
        }
      }
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="scss" scoped>
.back {
  display: inline-block;
  width: 16px;
}
</style>
